@media only screen and (max-width: 1080px),
only screen and (max-device-width: 1080px) {

    html,
    body {
        font-size: 168.75px;
    }
}

@media only screen and (max-width: 960px),
only screen and (max-device-width: 960px) {

    html,
    body {
        font-size: 150px;
    }
}

@media only screen and (max-width: 720px),
only screen and (max-device-width: 720px) {

    html,
    body {
        font-size: 112.5px;
    }
}

@media only screen and (max-width: 640px),
only screen and (max-device-width: 640px) {

    html,
    body {
        font-size: 100px;
    }
}

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {

    html,
    body {
        font-size: 75px;
    }
}

@media only screen and (max-width: 375px),
only screen and (max-device-width: 375px) {

    html,
    body {
        font-size: 58.59375px;
    }
}

@media only screen and (max-width: 320px),
only screen and (max-device-width: 320px) {

    html,
    body {
        font-size: 50px;
    }
}

@media only screen and (max-width: 240px),
only screen and (max-device-width: 240px) {

    html,
    body {
        font-size: 37.5px;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: .16rem;
}

ul,
li {
    list-style: none;
}

a,
a:active,
a:hover,
a:visited,
a:link {
    display: block;
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    width: 100%;
}

.clearfix {
    &::before,
    &::after {
        content: '';
        display: block;
        clear: both;
    }
}